<template>
	<view class="batch-content">
		<view style="height: 100rpx">
			<view class="tabsBox">
				<u-tabs :list="tabsList" @click="tabsClick" :scrollable="false" lineWidth="72rpx"></u-tabs>
			</view>
		</view>
		<!-- 作业详情tabs内容 -->
		<view v-if="tabsindex == 0">
			<!-- 		<view class="topBox plr30">
     			<view v-if="flag== false">
     				<view class="leftBtn">作业开始</view>
     				<view class="rightBtn">作业终结</view>
     			</view>
     			<view v-else>
     				<view class="leftBtns">作业开始</view>
     				<view class="rightBtns">作业终结</view>
     			</view>
     		</view> -->
			<view class="job-box">
				<view class="job-head">
					<view class="head-title flex">
						<view class="title">{{workPlan.workPlanName}}</view>
						<view class="timebox">
							<image class="imageStyle" src="../../../static/agentTime.png"></image>
							<text class="textStyle">{{workPlan.insertTime}}</text>
						</view>
					</view>
					<view class="head-box mt30">
						<view class="flex mb20">
							<view class="name">作业类型：</view>
							<view class="value">{{workPlan.workTypeName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">作业风险等级：</view>
							<view class="value">{{workPlan.riskLevelName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">工程项目名称：</view>
							<view class="value">{{workPlan.projectName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">报送单位：</view>
							<view class="value">{{workPlan.belongUnitName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">创建部门：</view>
							<view class="value">{{workPlan.belongDepName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">作业单位：</view>
							<view class="value">{{workPlan.workUnit}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">作业人员数量：</view>
							<view class="value">{{workPlan.workPeopleNum}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">开始时间：</view>
							<view class="value">{{workPlan.beginTime}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">结束时间：</view>
							<view class="value">{{workPlan.endTime}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">工作负责人：</view>
							<view class="value">{{workPlan.workManage}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">监理人：</view>
							<view class="value">{{workPlan.supervisor}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">督察人员：</view>
							<view class="value">{{workPlan.supManagePerson}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">到岗到位人员：</view>
							<view class="value">{{workPlan.dgr}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">作业地点：</view>
							<view class="value">{{workPlan.workPlace}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">作业内容：</view>
							<view class="value">{{workPlan.workContent}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">危险识别：</view>
							<view class="value">{{workPlan.riskIdentification}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">控制措施：</view>
							<view class="value">{{workPlan.controlMeasures}}</view>
						</view>
						<view class="flex mb20">
							<view class="name">绑定布控球：</view>
							<view class="value" style="color: #3473F9;">{{workPlan.cameraName}}</view>
						</view>
					</view>
				</view>
				<!--  下部分-->
				<view class="ipotoBox">
					<view class="flex">
						<view style="width: 240rpx;">
							<view style="font-size: 32rpx;color: #414A53;">安全交底</view>
							<view style="font-size: 24rpx;color: #65717D;margin-top: 20rpx;">安全交底照片</view>
						</view>
						<view v-if="photo" style="width: calc(100% - 240rpx);display: flex;flex-wrap: wrap;">
							<view v-for="(item,index) in photo" @click="imglistPreview(item)">
								<image class="photoStyle" :src="item.annexUrl"></image>
							</view>
						</view>
						<view v-else>
							<image class="photoStyle" :src="nophoto"></image>
						</view>
					</view>
					<view class="flex mt30">
						<view style="width: 240rpx;">
							<view style="font-size: 32rpx;color: #414A53;">工作票</view>
							<view style="font-size: 24rpx;color: #65717D;margin-top: 20rpx;">工作票照片</view>
						</view>
						<view v-if="photo2" style="width: calc(100% - 240rpx);display: flex;flex-wrap: wrap;">
							<view v-for="(item,index) in photo2" @click="imglistPreview(item)">
								<image class="photoStyle" :src="item.annexUrl"></image>
							</view>
						</view>
						<view v-else>
							<image class="photoStyle" :src="nophoto"></image>
						</view>
					</view>

					<view class="flex mt30">
						<view style="width: 240rpx;">
							<view style="font-size: 32rpx;color: #414A53;">现场措施布置</view>
							<view style="font-size: 24rpx;color: #65717D;margin-top: 20rpx;">现场措施布置照片</view>
						</view>
						<view v-if="photo3" style="width: calc(100% - 240rpx);display: flex;flex-wrap: wrap;">
							<view v-for="(item,index) in photo3" @click="imglistPreview(item)">
								<image class="photoStyle" :src="item.annexUrl"></image>
							</view>
						</view>
						<view v-else>
							<image class="photoStyle" :src="nophoto"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="noBody" v-if="workPlan.userAuditType =='01' && workPlan.exeState =='01'"></view>
			<view class="batch-footer" @click="changePeople(workPlan)"
				v-if="workPlan.userAuditType == '01' && (workPlan.exeState =='01' || workPlan.exeState =='02')">
				<image class="applicantImg" src="../../../static/ChangePeople.png">
				</image>
				<view style="color: #65717D;font-size: 28rpx;">
					变更作业人员
				</view>
			</view>
		</view>

		<!-- 资料上传内容 -->
		<view class="box" v-else>
			<!-- 安全交底 -->
			<view class="img-container">
				<view class="flex">
					<view style="font-size: 32rpx;color: #414A53;margin-left: 6rpx;">安全交底</view>
					<view style="font-size: 24rpx;color: #65717D;margin-top: 10rpx;margin-left: 20rpx;">上传安全交底照片
					</view>
				</view>
				<view class="note-image-box">
					<view class="note-image-item" v-for="(item,index) in safeImageLists" :key="index">
						<!-- //右上角删除图标 -->
						<view class="close-icon" @click="del(index,'1')">
							<u-icon name="close"></u-icon>
						</view>
						<view class="image-box" @click="previewImg(index,'1')">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
					</view>
					<!-- //因为上传图片设置9张 使用这里做判断 -->
					<view v-if="safeImageLists.length < 9" class="note-image-item" @click="addImage('1')">
						<!-- //添加图片按钮 -->
						<view class="image-box">
							<u-icon name="plus"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 工作表 -->
			<view class="img-container">
				<view class="flex">
					<view style="font-size: 32rpx;color: #414A53;margin-left: 6rpx;">工作表</view>
					<view style="font-size: 24rpx;color: #65717D;margin-top: 10rpx;margin-left: 20rpx;">上传工作表照片
					</view>
				</view>
				<view class="note-image-box">
					<view class="note-image-item" v-for="(item,index) in jobImageLists" :key="index">
						<!-- //右上角删除图标 -->
						<view class="close-icon" @click="del(index,'2')">
							<u-icon name="close"></u-icon>
						</view>
						<view class="image-box" @click="previewImg(index,'2')">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
					</view>
					<!-- //因为上传图片设置9张 使用这里做判断 -->
					<view v-if="jobImageLists.length < 9" class="note-image-item" @click="addImage('2')">
						<!-- //添加图片按钮 -->
						<view class="image-box">
							<u-icon name="plus"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 现场措施布置 -->
			<view class="img-container">
				<view class="flex">
					<view style="font-size: 32rpx;color: #414A53;margin-left: 6rpx;">现场措施布置</view>
					<view style="font-size: 24rpx;color: #65717D;margin-top: 10rpx;margin-left: 20rpx;">上传现场措施布置照片
					</view>
				</view>
				<view class="note-image-box">
					<view class="note-image-item" v-for="(item,index) in sceneImageLists" :key="index">
						<!-- //右上角删除图标 -->
						<view class="close-icon" @click="del(index,'3')">
							<u-icon name="close"></u-icon>
						</view>
						<view class="image-box" @click="previewImg(index,'3')">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
					</view>
					<!-- //因为上传图片设置9张 使用这里做判断 -->
					<view v-if="sceneImageLists.length < 9" class="note-image-item" @click="addImage('3')">
						<!-- //添加图片按钮 -->
						<view class="image-box">
							<u-icon name="plus"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="tabsindex == 1" class="button" @click="upload">上传</view>
	</view>
</template>

<script>
	import noPhoto from '../../../static/noPhoto.png'
	export default {
		data() {
			return {
				// 详情信息
				workPlan: {},
				// tabs下标
				tabsindex: 0,
				// 判断作业是否开始 还是 终结
				flag: false,
				tabsList: [{
					name: '作业详情',
				}, {
					name: '资料上传',
				}],
				nophoto: noPhoto,
				photo: [],
				photo2: [],
				photo3: [],
				// 安全交底数组
				safeImageLists: [],
				jobImageLists: [],
				sceneImageLists: [],
				id: '',
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getAppWorkPlanDetailInfo(this.id)
		},
		methods: {
			getAppWorkPlanDetailInfo(val) {
				let that = this
				let params = {
					workPlanId: val
				}
				that.request(that.$api.getAppWorkPlanDetailInfo, params, 'POST').then((res) => {
					if (res) {
						this.workPlan = res.resultValue.items[0]
						this.photo = res.resultValue.items[0].safety
						this.photo2 = res.resultValue.items[0].ticket
						this.photo3 = res.resultValue.items[0].measures
					}
				})
			},
			//tabs切换
			tabsClick(e) {
				this.tabsindex = e.index
				if (e.index == 0) {
					this.getAppWorkPlanDetailInfo(this.id)
				}
			},
			// 预览图片
			imglistPreview(item) {
				var urlList = []
				urlList.push(item.annexUrl) //push中的参数为 :src="item.img_url" 中的图片地址
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urlList
				})
			},
			// 变更作业人
			changePeople(val) {
				uni.navigateTo({
					url: '../changePeople/changePeople?workPlanId=' + val.workPlanId
				})
			},


			//删除对应图片
			del(index, type) {
				if (type == 1) {
					this.safeImageLists.splice(index, 1)
				} else if (type == 2) {
					this.jobImageLists.splice(index, 1)
				} else if (type == 3) {
					this.sceneImageLists.splice(index, 1)
				}

			},
			//查看图片
			previewImg(index, type) {
				let urls = []
				if (type == 1) {
					for (let i = 0; i < this.safeImageLists.length; i++) {
						urls.push(this.safeImageLists[i].url)
					}
				} else if (type == 2) {
					for (let i = 0; i < this.jobImageLists.length; i++) {
						urls.push(this.jobImageLists[i].url)
					}
				} else if (type == 3) {
					for (let i = 0; i < this.sceneImageLists.length; i++) {
						urls.push(this.sceneImageLists[i].url)
					}
				}
				for (let i = 0; i < this.safeImageLists.length; i++) {
					urls.push(this.safeImageLists[i].url)
				}
				uni.previewImage({
					current: index,
					urls: urls,
					indicator: "number",
					loop: true,
					fail(err) {
						uni.showToast({
							title: err,
							icon: "none"
						})
					}
				})
			},
			//添加图片
			addImage(type) {
				let that = this
				if (type == 1) {
					var count = 9 - this.safeImageLists.length
				} else if (type == 2) {
					var count = 9 - this.jobImageLists.length
				} else if (type == 3) {
					var count = 9 - this.sceneImageLists.length
				}

				uni.chooseImage({
					count: count,
					success: res => {
						// console.log(res,666)
						res.tempFiles.forEach((item, index) => {
							// 处理h5多选的情况
							if (index < count && type == 1) {
								// 安全交底
								that.safeImageLists.push({
									classify: '3',
									fileName: this.guid() + '.png',
									content: '',
									connectId: that.workPlan.workPlanId,
									url: item.path,
								})
							} else if (index < count && type == 2) {
								// 安全交底
								that.jobImageLists.push({
									classify: '1',
									fileName: this.guid() + '.png',
									content: '',
									connectId: that.workPlan.workPlanId,
									url: item.path,
								})
							} else if (index < count && type == 3) {
								// 安全交底
								that.sceneImageLists.push({
									classify: '4',
									fileName: this.guid() + '.png',
									content: '',
									connectId: that.workPlan.workPlanId,
									url: item.path,
								})
							}
						})
					}
				})
			},

			// 上传
			upload() {
				let that = this
				// 安全交底照片数组
				let safeImageLists = that.safeImageLists
				// 工作表
				let jobImageLists = that.jobImageLists
				// 现场措施不知
				let sceneImageLists = that.sceneImageLists
				if (safeImageLists.length == 0 && jobImageLists.length == 0 && sceneImageLists.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择需要上传的图片！',
						duration: 2000
					});
				} else {
					let params = []
					params = safeImageLists.concat(jobImageLists, sceneImageLists)
					params.forEach((item, index) => {
						that.tobase64(item.url, item, index, params)
					})
				}
			},
			tobase64(url, data, index, params) {
				// #ifdef APP-PLUS
				const path = plus.io.convertLocalFileSystemURL(url) //绝对路径
				const fileReader = new plus.io.FileReader()
				fileReader.readAsDataURL(path)
				fileReader.onloadend = (res) => { //读取文件成功完成的回调函数
					// console.log(res.target.result,66666) //输出base64内容
					let base64 = res.target.result.replace(/^data:image\/\w+;base64,/, "")
					// console.log(base64,66666)
					// let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
					data.content = base64
					// console.log(params)
					delete data.url
					if (index == params.length - 1) {
						this.request(this.$api.upload, params, 'POST').then((res) => {
							if (res) {
								uni.showToast({
									title: res.resultValue,
									duration: 2000
								});
							}
							this.safeImageLists = []
							this.jobImageLists = []
							this.sceneImageLists = []
						})
					}
				}
				// #endif
				// #ifdef MP-WEIXIN
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
				let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64 
				data.content = base64
				delete data.url
				if (index == params.length - 1) {
					this.request(this.$api.upload, params, 'POST').then((res) => {
						if (res) {
							uni.showToast({
								title: res.resultValue,
								duration: 2000
							});
						}
						this.safeImageLists = []
						this.jobImageLists = []
						this.sceneImageLists = []
					})
				}
					},
					fail: (err) => {
						console.log(err)
					}
				})
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.batch-content {
		/* height: 100vh; */
		background-color: #F7F8FA;
		position: relative;
	}

	.topBody {
		width: 100%;
		height: 88rpx;
		position: relative;
	}

	.tabsBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
	}


	.job-box {
		background-color: #f4f6fa;
		padding: 30rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.job-head {
		background: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 8px;
		padding: 20rpx 20rpx 10rpx 30rpx;
		box-sizing: border-box;
	}

	.ipotoBox {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 40rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 8px;
	}

	.title {
		width: calc(100% - 360rpx);
		color: #000000;
		font-size: 32rpx;
		font-weight: Medium;
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		margin-right: 60rpx;
	}

	.timebox {
		width: 300rpx;
		display: flex;
		justify-content: space-between;
	}

	.imageStyle {
		width: 28rpx;
		height: 28rpx;
		margin-top: 4rpx;
	}

	.textStyle {
		width: calc(100% - 32rpx);
		margin-left: 10rpx;
		color: #939EA8;
		font-size: 24rpx;
	}

	.name {
		width: 210rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		width: calc(100% - 210rpx);
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.applicantImg {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-top: 40rpx;
	}

	.topBox {
		display: flex;
		margin: 20rpx 0 0 0;
		position: relative;
	}

	.leftBtn {
		width: 50%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		background: url(../../../static/operator1.png);
		background-size: 100% 100%;
		position: absolute;
	}

	.rightBtn {
		width: 45%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background: url(../../../static/operator2.png);
		background-size: 100% 100%;
		color: #AABBE0;
		position: absolute;
		left: 51%;
	}

	.leftBtns {
		width: 50%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #AABBE0;
		background: url(../../../static/operator3.png);
		background-size: 100% 100%;
		position: absolute;
	}

	.rightBtns {
		width: 45%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background: url(../../../static/operator4.png);
		background-size: 100% 100%;
		color: #fff;
		position: absolute;
		left: 51%;
	}

	.box {
		background-color: #fff;
		width: calc(100% - 60rpx);
		margin: 20rpx 20rpx 20rpx 30rpx;
		padding: 50rpx;
		box-sizing: border-box;
	}

	.button {
		color: #FFFFFF;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #3473F9;
		border-radius: 10px;
		box-sizing: border-box;
		box-shadow: 0rpx 40rpx 40rpx -40rpx #99B9FC;
		width: calc(100% - 60rpx);
		margin: 60rpx 30rpx 20rpx 30rpx;
	}

	.photoStyle {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		margin-left: 20rpx;
		margin-bottom: 10rpx;
	}

	.noBody {
		width: 100%;
		height: 188rpx;
		background-color: #f4f6fa;
	}

	.batch-footer {
		width: 100%;
		height: 200rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 60rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-top: 1px solid #CDCDCD;
		text-align: center;
	}

	.leftTitle {
		font-size: 32rpx;
		color: #414A53;
	}

	.rightTitle {
		font-size: 28rpx;
		margin: 5rpx 0 0 40rpx;
		color: #65717D;
	}

	.img-container {
		margin-bottom: 20px;

		.note-image-box {
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;

			.note-image-item {
				position: relative;
				//这两个百分比很关键
				width: 120rpx;
				height: 120rpx;
				padding-top: 100rpx;
				box-sizing: border-box;

				.close-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 6rpx;
					top: 6rpx;
					width: 22rpx;
					height: 22rpx;
					border-radius: 50%;
					background-color: #d5d5d5;
					z-index: 2;
				}

				.image-box {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 5px;
					right: 5px;
					bottom: 5px;
					left: 5px;
					border: 2rpx #eee solid;
					overflow: hidden;
					border-radius: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
